<template>
	<!-- 忘记密码 -->
	<view class="zone">
		<view class="content">
			<image class="topimg1" src="http://image.qxgm.site/tdz/img/login/word.png" mode="widthFix"></image>
			<view class="listBox">
				<view class="list">
					<image class="yez" src="http://image.qxgm.site/tdz/img/login/ye.png" mode="widthFix"></image>
					<view class="aua">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
						<text>忘记密码</text>
						<image src="http://image.qxgm.site/tdz/img/public/l2.png" mode="widthFix"></image>
					</view>
					<view class="piece">
						<span>手机号</span>
						<input type="number" v-model="datas.mobile" placeholder-class="placeholder_class"
							placeholder="请输入手机号">
					</view>
					<view class="piece">
						<span>验证码</span>
						<input type="number" placeholder-class="placeholder_class" v-model="sms_code"
							placeholder="请输入验证码">
						<view class="button" id="captcha-button" :datas=datas :change:datas="verifys">{{ yanzhengma }}
						</view>
					</view>
					<div id="captcha-element"></div>
					<view class="piece">
						<span>密码</span>
						<input type="password" @input="onKeyVinInput(pwd)" placeholder-class="placeholder_class"
							v-model="pwd" placeholder="请输入密码">
					</view>
					<view class="piece">
						<span>密码</span>
						<input type="password" placeholder-class="placeholder_class" v-model="re_pwd"
							placeholder="请确认密码">
					</view>
					<view class="loginbtn" @click="goyes()">
						确认
					</view>
					<view class="flexbw">
						<text @click="login">返回登录</text>
					</view>
					<u-checkbox-group class="checkgroup">
						<u-checkbox v-model="checked" :size="25" :label-disabled="false" class="checkbox">
							<view class="exieyi">
								<span>我同意</span>
								<text class="yellow" @click.stop="xieyi">《用户协议》</text>
								<span>与</span>
								<text class="yellow" @click.stop="yinsi">《隐私政策》</text>
							</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	var js
	export default {
		data() {
			return {
				datas: {
					second: 0, //倒计时
					mobile: '', //手机号
				},
				sms_code: '', //验证码
				pwd: '', // 密码
				re_pwd: '', //确认密码
				checked: false, //隐私选择
				js: '',
				token: uni.getStorageSync('token')

			}
		},
		computed: {
			yanzhengma() {
				if (this.datas.second == 0) {
					return "发送";
				} else {
					if (this.datas.second < 10) {
						return "重发0" + this.datas.second;
					} else {
						return "重发" + this.datas.second;
					}
				}
			},
		},

		onLoad() {

		},
		//卸载清除定时器
		onUnload() {
			clearInterval(js);
			this.datas.second = 0;
		},
		methods: {
			// 注册事件
			async goyes() {
				if (this.datas.mobile == "" || this.datas.mobile == null) {
					this.$u.toast('手机号不能为空')
				} else if (!/^1[3456789]\d{9}$/.test(this.datas.mobile)) {
					this.$u.toast('手机号有误')
				} else if (this.sms_code == "" || this.sms_code == null) {
					this.$u.toast('验证码不能为空')
				} else if (this.pwd == "" || this.pwd == null) {
					this.$u.toast('密码不能为空')
				} else if (this.re_pwd == "" || this.re_pwd == null) {
					this.$u.toast('请确认密码')
				} else if (this.re_pwd != this.pwd) {
					this.$u.toast('两次密码输入不一致')
				} else if (!this.checked) {
					this.$u.toast('请勾选并同意用户协议与隐私政策')
				} else {
					let res = await this.$http.index.resetPwd({
						mobile: this.datas.mobile,
						pwd: this.pwd,
						re_pwd: this.re_pwd,
						sms_code: this.sms_code,
					}).then(res => {
						if (res.code == 1) {
							this.$u.toast('重置成功，正在为您跳转至登录页...')
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/login/login",
								});
							}, 2000);
						} else {
							this.$u.toast(res.msg)
						}
					})

				}
			},
			onKeyVinInput(event) {
				var value = event;
				if (!value || value == " ") {
					return "";
				}
				// 数字和字母
				const rule = /[\W]/g;
				this.$nextTick(() => {
					this.pwd = value.replace(rule, "");
				});
			},
			onKeyVinInput2(event) {
				console.log(event);
				var value = event;
				if (!value || value == " ") {
					return "";
				}
				// 数字和字母
				const rule = /[\W]/g;
				this.$nextTick(() => {
					this.re_pwd = value.replace(rule, "");
				});
			},
			// 隐私和协议选中切换
			changeValue(e) {
				this.checked = !this.checked

			},
			login() {
				uni.reLaunch({
					url: '/pages/login/login'
				});
			},
			forget() {
				uni.navigateTo({
					url: '/pages/login/forget'
				});
			},
			xieyi() {
				uni.navigateTo({
					url: '/pages/login/agreement'
				});
			},
			yinsi() {
				uni.navigateTo({
					url: '/pages/login/privacy'
				});
			},
			//提示框传值
			to(msg) {
				uni.showToast({
					title: msg,
					icon: 'none',
					duration: 1500
				})
			},
			async getcodev3(captchaVerifyParam) {
				console.log(captchaVerifyParam)
				if (this.datas.second > 0) {
					return;
				}
				this.datas.second = 60;
				let res = await this.$http.index.sendSms({
					verify_param: captchaVerifyParam,
					mobile: this.datas.mobile,
					type: 'retrievePwd'
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						js = setInterval(() => {
							this.datas.second--;
							if (this.datas.second == 0) {
								clearInterval(js);
							}
						}, 1000);
					} else {
						this.datas.second = 0;
					}
				})
			}
		}
	}
</script>
<script module="verifys" lang="renderjs">
	var js
	export default {
		mounted() {
			if (typeof window.verifys === 'function') {
				// const script = document.createElement('script')
				// script.src = 'https://g.alicdn.com/AWSC/AWSC/awsc.js'
				// document.body.appendChild(script)
				return this.initComp()

			} else {

				const script = document.createElement('script')
				script.src = 'https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js'
				document.body.appendChild(script)
				// document.head.appendChild(script)
				setTimeout(() => {
					return this.initComp()
				}, 1000);

			}

		},

		methods: {
			initComp() {
				initAliyunCaptcha({
					SceneId: 'bzlciko4', // 场景ID。根据步骤二新建验证场景后，您可以在验证码场景列表，获取该场景的场景ID
					prefix: '1rgmii', // 身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标
					mode: 'popup', // 验证码模式。popup表示要集成的验证码模式为弹出式。无需修改
					element: '#captcha-element', // 页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
					button: '#captcha-button', // 触发验证码弹窗的元素。button表示单击登录按钮后，触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值
					captchaVerifyCallback: this.captchaVerifyCallback, // 业务请求(带验证码校验)回调函数，无需修改
					onBizResultCallback: this.onBizResultCallback, // 业务请求结果回调函数，无需修改 
					getInstance: this.getInstance, // 绑定验证码实例函数，无需修改
					slideStyle: {
						width: 360,
						height: 40,
					}, // 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px
					language: 'cn', // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
				});
			},
			captchaVerifyCallback(captchaVerifyParam) {
				//1.向后端发起业务请求，获取验证码验证结果和业务结果   
				document.getElementById('aliyunCaptcha-mask').style.display = 'none';
				document.getElementById('aliyunCaptcha-window-popup').style.display = 'none';
				document.getElementById('aliyunCaptcha-btn-refresh').click();

				if (this.datas.mobile == "" || this.datas.mobile == null) {
					this.$ownerInstance.callMethod('to', '请先输入手机号')
					return;
				} else if (!/^1[3456789]\d{9}$/.test(this.datas.mobile)) {
					this.$ownerInstance.callMethod('to', '请先输入正确手机号')
					return;
				} else {
					this.$ownerInstance.callMethod('getcodev3', captchaVerifyParam)
				}
			},
			// 验证通过后调用
			onBizResultCallback() {
				console.log('onBizResultCallback');
			},

		},

	}
</script>
<style lang="less" scoped>
	.zone {
		padding: 2vh 0px 10px;
		min-height: 100vh;
		background-image: url('http://image.qxgm.site/tdz/img/login/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.topimg1 {
		display: block;
		margin: 0 auto;
		width: 79%;
	}

	.listBox {
		margin-top: 4vh;
		background: url(http://image.qxgm.site/tdz/img/login/mg-04.png) no-repeat;
		background-size: 100% 100%;
	}

	.aua {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 3vh;

		text {
			font-weight: normal;
			font-size: 20px;
			color: #333333;
			line-height: 20px;
		}

		image {
			width: 20%;
		}
	}

	.list {
		position: relative;
		padding: 5vh 14% 5vh;
	}

	.yez {
		position: absolute;
		width: 50px;
		bottom: -10px;
		right: -10px;
	}

	.piece {
		padding: 15px;
		margin-bottom: 6px;
		background: #efefef;
		border-radius: 1px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;

		span {
			display: block;
			min-width: 70px;
			font-size: 14px;
			font-weight: normal;
			color: #50433A;
			line-height: 14px;
		}

		.button {
			width: 60px;
			height: 30px;
			text-align: center;
			position: absolute;
			right: 10px;
			top: 10px;
			font-size: 14px;
			font-weight: normal;
			color: #cbf8fb;
			line-height: 30px;
			text-shadow: 0 1px 1px #006599;
			background: url(http://image.qxgm.site/tdz/img/login/btn2.png) no-repeat;
			background-size: 100% 100%;
		}

	}

	.placeholder_class {
		font-size: 14px;
		color: #a09c99;
	}

	input {
		flex-grow: 1;
		width: 50%;
		font-size: 14px;
		color: #333;
	}

	.flexbw {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		font-size: 14px;
		font-weight: normal;
		text-decoration: underline;
		color: #663300;
		line-height: 14px;
	}

	.loginbtn {
		width: 158px;
		height: 47px;
		background: url('http://image.qxgm.site/tdz/img/login/btn.png') no-repeat;
		background-size: 100% 100%;
		text-align: center;
		font-size: 18px;
		font-weight: normal;
		color: #fffcca;
		line-height: 47px;
		text-shadow: 0 1px 1px #CB6500;
		margin: 25px auto 20px;
	}

	.exieyi {
		font-size: 12px;
		color: #333;
	}

	.checkgroup {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-top: 10px;
	}

	.checkbox {
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yellow {
		color: #00CC33;
	}

	.piece2 {
		padding: 5px !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 6px 0;
	}

	::v-deep #SM_BTN_WRAPPER_1 {
		width: 100% !important;
	}

	::v-deep #SM_BTN_1 {
		width: 100% !important;
		border-radius: 13px !important;
	}

	::v-deep #rectMask {
		width: 100% !important;
		border-radius: 13px !important;
	}

	::v-deep .sm-btn {
		border: none !important;
	}

	/deep/ .sm-txt {
		color: #FFDEAF !important;
	}

	/deep/ .u-checkbox__icon-wrap {
		background: #0F1A29 !important;
		border: 1px solid #999 !important;
		border-radius: 50% !important;
	}

	/deep/ .u-checkbox__icon-wrap--checked .u-icon__icon {
		color: #fff !important;
	}
</style>